// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Map, CoverView, CoverImage, Image } from '@tarojs/components'
// less
import './index.less'
import If from '../../../../components/page-components/if'
import { navigateTo, switchTab } from '../../../../crossplatform/apiservice/navigate'
import pagejumplist from '../../../../configuration/pagejumplist.json'
class JobBottomDetail extends Component {
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
    this.mapCtx = wx.createMapContext('myMap', this.$scope)
  }

  componentDidShow() {
    // onshow
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }

  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  reportClick = () => {
    if (this.props.jobtopdetail && this.props.dataEntry.isReport === 0 && this.props.userId) {
      navigateTo({
        url: `${pagejumplist['company-report'].path}?id=${
          this.props.jobtopdetail.id
        }&&companyName=${this.props.jobtopdetail.simpleName ||
          this.props.jobtopdetail.companyName ||
          ''}&&jobname=${this.props.jobtopdetail.jobname}&&companyId=${
          this.props.jobtopdetail.companyId
        }`
      })
    }
  }
  getmakers = () => {
    const { workActive, workarea = [] } = this.props.detail || {}
    const current = workarea[workActive]
    if (current) {
      return [
        {
          id: current.id,
          latitude: current.latitude,
          longitude: current.longitude,
          name: current.address,
          iconPath:
            'https://imagesize.hrwork.com/sp/files/e3f5241e-ff3e-41f7-9668-99cfec052875.png',
          width: 40,
          height: 40
        }
      ]
    }
  }
  onOpenClick = () => {
    Taro.vibrateShort()
    const { workActive, workarea = [] } = this.props.detail || {}
    this.props.onOpenClick(workarea[workActive])
  }
  placeClick = index => {
    Taro.vibrateShort()
    this.props.onPlaceClick(index)
  }
  locationClick = () => {
    Taro.vibrateShort()
    console.log('locationClick')
    this.props.onCurrentLocationClick()
  }
  render() {
    const { workActive, workContent = '', mapLocation, workarea = [] } = this.props.detail || {}
    const makers = this.getmakers()
    console.log('makers', makers, 'mapLocation', this.props.jobtopdetail)
    return (
      <View className="JobBottomDetail_id84849">
        <View className="toreport">
          <View className="title">不要缴纳费用给企业，虚假职位或诈骗信息请举报。</View>
          <View className="reportbtn" onClick={this.reportClick}>
            {this.props.dataEntry.isReport === 1 ? `已举报` : '举报'}
          </View>
        </View>
        <View className="workwrap">
          {/* <View className="timewrap">
            <View className="worktitle">工作时间</View>
            <Text className="workcontent">{worktime}</Text>
          </View> */}
          <View className="workcontentwrap">
            <View className="worktitle">工作内容</View>
            <Text className="workcontent">{workContent}</Text>
          </View>
          <View className="workareawrap">
            <View className="worktitle">工作地点</View>
            <View className="workareawrapcount">{workarea.length}</View>
          </View>
        </View>
        <View className="cover-wrap">
          <If visible={makers}>
            <View className="map-wrap">
              <Map
                id="myMap"
                style="position: relative;width: 100%; height: 100%;"
                latitude={mapLocation.latitude}
                longitude={mapLocation.longitude}
                markers={makers}
                showLocation
              >
                <CoverImage
                  className="topXian"
                  src="https://imagesize.hrwork.com/sp/files/e09f2f16-d3d5-466c-9da2-89737d5ac967.png"
                />
                <CoverImage
                  className="bottomXian"
                  src="https://imagesize.hrwork.com/sp/files/cd4d2715-2d29-4981-9858-08aed23d4469.png"
                />
                <CoverView className="daohang" onClick={this.onOpenClick}>
                  <CoverImage
                    className="daohang-img"
                    src="https://imagesize.hrwork.com/sp/files/733aadde-677c-4358-a02a-96767d07cd6e.png"
                  />
                </CoverView>
                <CoverView className="dingwei" onClick={this.locationClick}>
                  <CoverImage
                    className="dingwei-img"
                    src="https://imagesize.hrwork.com/sp/files/3bff11de-b48f-4611-b792-5a8d31c020bd.png"
                  />
                </CoverView>
              </Map>
            </View>
          </If>
          <View className="map-list-wrap">
            {workarea.map((data, index) => {
              return (
                <View
                  className="workareasingle"
                  onClick={this.placeClick.bind(this, index)}
                  key={index}
                >
                  <View
                    className={`workareasingleleft ${
                      index === workActive ? 'workareasingleleft-active' : ''
                    }`}
                  >
                    {index === workActive && (
                      <Image
                        className="place-active"
                        src="https://imagesize.hrwork.com/sp/files/62729a49-edf0-4df0-be56-d1aaf2b2b945.png"
                      />
                    )}
                    {data.address} {data.roomInfo || ''}
                  </View>
                  <View className="distance">
                    {data.distance ? `${(data.distance / 1000).toFixed(2)}km` : ''}
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      </View>
    )
  }
}
// cc5c4
export default JobBottomDetail
